<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>学时查询</title>
        <link rel="stylesheet" href="./src/lib/bootstrap/bootstrap-grid.css">
        <link rel="stylesheet" href="./src/lib/hint/hint.min.css">
        <link rel="stylesheet" href="./src/css/base.css">
        <script type="text/javascript" src="./src/lib/vue/vue.min.js"></script>
    </head>
    <body>
        <div id="app" class="container-fluid pt20">
            <div class="row">
                <div class="col-12 col-lg">
                    <div class="search-group">
                        <input type="text" placeholder="请输入证件号码" v-model="query">
                        <button @click="search">查询</button>
                    </div>
                    <div class="card no-padding">
                        <div class="card-header">
                            已汇总学时
                        </div>
                        <div class="card-body">
                            <table class="table table-hover table-inverse">
                                <thead>
                                    <tr>
                                        <th>&nbsp;</th>
                                        <th>证件号码</th>
                                        <th>培训车型</th>
                                        <th>大纲版本</th>
                                        <th>科目一</th>
                                        <th>科目二理论</th>
                                        <th>科目二实操</th>
                                        <th>科目二模拟</th>
                                        <th>科目三理论</th>
                                        <th>科目三实操</th>
                                        <th>科目三模拟</th>
                                        <th>科目三里程</th>
                                        <th>注册时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="train in trainTime">
                                        <tr @click="expand(train)">
                                            <td :aria-label="train.$expand ? '收起' : '展开'" class="hint--right hint--white">
                                                <svg class="icon">
                                                    <use :xlink:href="train.$expand ? '#minus' : '#plus'"></use>
                                                </svg>
                                            </td>
                                            <td>{{train.cardNum}}</td>
                                            <td>{{train.trainCarType}}</td>
                                            <td>{{train.version}}</td>
                                            <td>{{train.subOneTime}}</td>
                                            <td>{{train.subTwoLlTime}}</td>
                                            <td>{{train.subTwoScTime}}</td>
                                            <td>{{train.subTwoMnTime}}</td>
                                            <td>{{train.subThreeLlTime}}</td>
                                            <td>{{train.subThreeScTime}}</td>
                                            <td>{{train.subThreeMnTime}}</td>
                                            <td>{{train.subThreeMileage}}</td>
                                            <td>{{transform(train.registrDate)}}</td>
                                        </tr>
                                        <tr v-show="train.$expand">
                                            <td colspan="13">
                                                <tabs>
                                                    <tab name="推送记录">
                                                        <table class="table table-hover table-inverse">
                                                            <thead>
                                                                <tr>
                                                                    <th>科目</th>
                                                                    <th>学时</th>
                                                                    <th>里程</th>
                                                                    <th>是否推送</th>
                                                                    <th>推送时间</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr v-for="item in push">
                                                                    <td>{{item.subType}}</td>
                                                                    <td>{{item.trainTime}}</td>
                                                                    <td>{{item.trainMileage}}</td>
                                                                    <td>{{!!item.isPush ? '已推送' : '待推送'}}</td>
                                                                    <td>{{transform(item.updateTime, 1)}}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </tab>
                                                    <tab name="学习记录">
                                                        <table class="table table-hover table-inverse">
                                                            <thead>
                                                                <tr>
                                                                    <th>科目</th>
                                                                    <th>类型</th>
                                                                    <th>学时</th>
                                                                    <th>里程</th>
                                                                    <th>驾校</th>
                                                                    <th>教练</th>
                                                                    <th>outterId</th>
                                                                    <th>上传时间</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr v-for="item in study">
                                                                    <td>{{item.subType}}</td>
                                                                    <td>{{HOUR_TYPE[item.hourType]}}</td>
                                                                    <td>{{item.trainTime}}</td>
                                                                    <td>{{item.trainMileage}}</td>
                                                                    <td>{{item.orgName}}</td>
                                                                    <td>{{item.coachName}}</td>
                                                                    <td>{{item.outterId}}</td>
                                                                    <td>{{transform(item.uploadTime, 1)}}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </tab>
                                                    <tab name="所有大纲">
                                                        <table class="table table-hover table-inverse">
                                                            <thead>
                                                                <tr>
                                                                    <th>培训车型</th>
                                                                    <th>大纲版本</th>
                                                                    <th>科目一理论</th>
                                                                    <th>科目二理论</th>
                                                                    <th>科目二实操</th>
                                                                    <th>科目二模拟</th>
                                                                    <th>科目三理论</th>
                                                                    <th>科目三实操</th>
                                                                    <th>科目三模拟</th>
                                                                    <th>科目三里程</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr v-for="item in catalog">
                                                                    <th>{{item.trainCarType}}</th>
                                                                    <td>{{item.version}}</td>
                                                                    <td>{{item.subOneTime}}</td>
                                                                    <td>{{item.subTwoLlTime}}</td>
                                                                    <td>{{item.subTwoScTime}}</td>
                                                                    <td>{{item.subTwoMnTime}}</td>
                                                                    <td>{{item.subThreeLlTime}}</td>
                                                                    <td>{{item.subThreeScTime}}</td>
                                                                    <td>{{item.subThreeMnTime}}</td>
                                                                    <td>{{item.subThreeMileage * 1000}}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </tab>
                                                </tabs>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col col-lg-6 rail">
                    <div class="card">
                        <div class="card-header">
                            操作记录
                        </div>
                        <div class="card-body" style="max-height: 260px; overflow: auto;">
                            <template v-for="h in history">
                                <div>查询 <a @click="reQuery(h.cardNum)" href="javascript:;" style="color: #FFF;" aria-label="点击重新查询" class="hint--right hint--white">{{h.cardNum}}</a> &emsp;&emsp;&emsp;&emsp;&emsp; {{transform(h.date)}}</div>
                                <br>
                            </template>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            学员信息
                        </div>
                        <div class="card-body">
                            <div>姓名: {{user.studentName}}</div>
                            <br>
                            <div>证件号码: {{user.cardNum}}</div>
                            <br>
                            <div>手机号码: {{user.mobile}}</div>
                            <br>
                            <div>所属组织: {{user.orgName}}</div>
                            <br>
                            <div>组织编码: {{user.orgCode}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="plus" viewBox="0 0 32 32" fill="currentColor">
                <title>plus</title>
                <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
            </symbol>
            <symbol id="minus" viewBox="0 0 32 32" fill="currentColor">
                <title>minus</title>
                <path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"></path>
            </symbol>
        </svg>
        <script src="src/js/tab.js"></script>
        <script src="src/js/index.js"></script>
    </body>
</html>
